<template>
	<view>
		<scroll-view class="homePageSearch" :scroll-y="true" :scroll-with-animation="true">
			<view class="tool-version">
				<swiper class="tool-version-swiper">
					<swiper-item class="tool-version-swiper-item swiper-item1" v-for="(item,index) in 6" :key="index">
						<view class="tool-version-item">
							<view class="flex_between tool_tit">
								<view>服饰穿搭榜</view>
								<view class="tool_more">查看更多 ></view>
							</view>
							<view class="tool_content">
								<view class="flex_box tool_item" v-for="(items,indexs) in 4" :key="indexs">
									<view class="tool_logo">
										<image src="https://img13.360buyimg.com/n12/jfs/t1/159087/17/45632/42043/664b3b8aFd47657c7/3b4dbea3b5e772b9.jpg"></image>
										<image class="tool_medal" v-if="indexs==0" mode="widthFix" src="https://img.jinghushi.com/images/9/2024/11/rXvQ00nl6z8GJ6XZYzQGovvtn3zTnC.png"></image>
										<image class="tool_medal" v-if="indexs==1" mode="widthFix" src="https://img.jinghushi.com/images/9/2024/11/WKWyK41okib4b3GgIWUBgUyw3BBk4b.png"></image>
										<image class="tool_medal" v-if="indexs==2" mode="widthFix" src="https://img.jinghushi.com/images/9/2024/11/j79d97Rdhr77082907758982ShThdz.png"></image>
									</view>
									<view class="tool_info flex1">
										<view class="clamp2">小米Redmi K70 第二代骁龙8 澎湃OS 16GB+256GB 墨羽 红米5G手机 SU7 小米汽车互联 AI手机</view>
										<view class="tool_price flex_align_center">
											<view class="new"><text class="pub_small">￥</text>3908.61</view>
											<view class="pub_old">￥7888.56</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<style lang="scss" scoped>
.homePageSearch {
	margin-top: 20rpx;
	box-sizing: border-box;
	background-color: #F6F6F6;
}
.tool-version-swiper {
  width: 100% !important;
  height: 780rpx;
}
.tool-version-swiper-item {
  width: 520rpx !important;
  padding: 0 20rpx 0 0;
}
.tool-version-item{
	height: 100%;
	background: #F0E1FF;
	border: 2rpx solid #fff;
	border-radius: 16rpx;
	padding: 10rpx;
	.tool_tit{
		padding: 10rpx 20rpx 20rpx;
		font-weight: bold;
		.tool_more{
			color: #666;
			font-size: 24rpx;
			font-weight: normal;
		}
	}
	.tool_content{
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 10rpx;
		.tool_item{
			.tool_logo{
				position: relative;
				width: 150rpx;
				height: 150rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
				.tool_medal{
					position: absolute;
					width: 40rpx;
					left: 0;
					top: 0;
				}
			}
			.tool_info{
				padding-left: 20rpx;
				.clamp2{
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
				.tool_price{
					.new{
						color: #AF141D;
					}
				}
			}
		}
	}
}
</style>

